Props

在 Vue 中元件的每個實體狀態、模板等作用的範圍都會是獨立的，這代表我們不能再子元件中直接去修改父元件，除了會造成結合程度過高維修上不易，也會產生許多難以追蹤的錯誤，但我們會使用切分 Component 的方式撰寫程式碼，就是希望可以去重複利用，但不能直接取用，所以這時候就需要透過 Props 了！

方法很簡單，可以透過我們之前介紹的指令：v-bind 來協助我們：

<template>
  <p>{{ iThome }}</p>
  <component-example :parent-iThome="iThome"></component-example>
</template>

<script>
const app = Vue.createApp({
  data() {
    return {
      msg: "這是外層元件的 msg",
    };
  },
});

app.component("my-component", {
  template: `
    <div class="component">
      <div> 從 props 來的 parentMsg ==> {{ parentMsg }} </div>
      <div> 自己的 msg ==> {{ msg }} </div>
    </div>`,
  props: ["parentMsg"],
  data: () => {
    return {
      msg: "這是子元件的 msg",
    };
  },
});
</script>

就像這樣，我們可以透過 props 屬性去宣告從「外部」引用進來的屬性名稱，並在外層模板中使用內層元件標籤時，需要已 v-bind 將資料傳遞。要注意的是，props 與子元件命名時，若我們以 HTML 作為模板的時，因為 html 中不分大小寫的關係，如果是小駝峰式的寫法，如：parentMsg，就需要在模板中轉換成連字號做使用，如：parent-msg。

而在內層元件中去宣告 props 的屬性，最簡單的方式就是透過「陣列」型態：

app.component("my-component", {
  props: ['props1', 'props2', 'props3', ...],
});

並透過 HTML 標籤內的屬性將外層的狀態引入至對應的 props：

  <component-example
    :props1="..."
    :props2="..."
    :props3="..."
  ></component-example>